import { Tabs, WhiteSpace } from 'antd-mobile';
import React, { Component } from 'react';
import './feedback.css';
import UserFeedbackSearch from './UserFeedbackSearch'
import FruiterFeedbackSearch from './FruiterFeedbackSearch'
import GotoPage from './GotoPage';
import GotoPage2 from './GotoPage2';
import { withRouter } from "react-router-dom";
import { FeedbackCreator, DelFeedback } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import ReactTooltip from 'react-tooltip'
import $ from 'jquery'
import { Popover } from '@material-ui/core';
import { Send_tim } from '../IM/actiontim';
//反馈管理右半部分页面
const tabs = [
    { title: '用户反馈' },
    { title: '商家反馈' }
];
class Feedback extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.props.dispatch(FeedbackCreator())
    }
    render() {
        return (
            <div className="body_right">
                <div className='right_top'>
                    <p>反馈管理</p>
                </div>
                <div className='right_middle'>
                    <WhiteSpace />
                    <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={false} distanceToChangeTab={0.3}>
                        <div className='search'>
                            <p>输入查找的内容</p>
                            <UserFeedbackSearch />
                            <div className='feedbacktable'>
                                <table border='0' cellpadding='0' cellspacing='0' className='mytable' width="100%">
                                    <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>ID</th>
                                            <th>反馈者ID</th>
                                            <th>反馈者昵称</th>
                                            <th>反馈者手机号</th>
                                            <th>反馈者邮箱</th>
                                            <th>反馈内容</th>
                                            <th>操作</th>
                                            <th style={{ width: '5px' }}></th>
                                        </tr>
                                    </thead>
                                    <tbody className='tbody1'>
                                        {
                                            this.props.feedbackreducer.filter(
                                                item => !(item.feedback !== 1)).map((item, idx) => {
                                                    return (
                                                        <tr>
                                                            <td>{idx + 1}</td>
                                                            <td>{item.feedback_id}</td>
                                                            <td>{item.user_id}</td>
                                                            <td>{item.user_name}</td>
                                                            <td>{item.user_phone}</td>
                                                            <td>{item.user_email}</td>
                                                            <td
                                                                data-tip={item.feedback_context}
                                                                data-place={'bottom'}
                                                                data-html={true}
                                                                data-class='my-tabcolor'
                                                            > {item.feedback_context}</td>
                                                            <td>
                                                                <button className="solute"
                                                                    onClick={() => {
                                                                        const adminpwd = prompt('请输入管理员登录密码：')
                                                                        if (adminpwd) {
                                                                            this.props.dispatch(DelFeedback(item.feedback_id, adminpwd))
                                                                            Send_tim(item.user_phone,`您反馈的问题<${item.feedback_context}>已经解决，欢迎再提意见`)
                                                                        }
                                                                        return false;
                                                                    }}
                                                                >已解决</button>
                                                            </td>
                                                            <ReactTooltip html={true} />
                                                        </tr>
                                                    )
                                                })

                                            // })
                                        }
                                    </tbody>

                                </table>

                            </div>
                            {/* 分页 */}
                            <GotoPage />
                        </div>
                        <div className='search'>
                            <p>选择查找的手机号</p>
                            <FruiterFeedbackSearch />
                            <div className='feedbacktable2'>
                                <table border='0' cellpadding='0' cellspacing='0' className='mytable2' width="100%">
                                    <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>ID</th>
                                            <th>反馈者ID</th>
                                            <th>反馈者昵称</th>
                                            <th>反馈者手机号</th>
                                            <th>反馈者邮箱</th>
                                            <th>反馈内容</th>
                                            <th>操作</th>
                                            <th style={{ width: '5px' }}></th>
                                        </tr>
                                    </thead>
                                    <tbody className='tbody2'>
                                        {
                                            this.props.feedbackreducer.filter(
                                                item => !(item.feedback !== 2)).map((item, index) => {
                                                    console.log(item)
                                                    return (
                                                        <tr>
                                                            <td>{index + 1}</td>
                                                            <td>{item.feedback_id}</td>
                                                            <td>{item.business_id}</td>
                                                            <td>{item.business_name}</td>
                                                            <td>{item.business_phone}</td>
                                                            <td>{item.business_email}</td>
                                                            <td
                                                                data-tip={item.feedback_context}
                                                                data-place={'bottom'}
                                                                data-html={true}
                                                                data-class='my-tabcolor'
                                                            > {item.feedback_context}</td>
                                                            <td>
                                                                <button className="solute"
                                                                    onClick={() => {
                                                                        const adminpwd = prompt('请输入管理员登录密码：')
                                                                        if (adminpwd) {
                                                                            this.props.dispatch(DelFeedback(item.feedback_id, adminpwd))
                                                                            Send_tim(item.business_phone,`您反馈的问题<${item.feedback_context}>已经解决，欢迎再提意见`)
                                                                        }
                                                                        return false;
                                                                    }}
                                                                >已解决</button>
                                                            </td>
                                                            <ReactTooltip html={true} />
                                                        </tr>
                                                    )

                                                })
                                        }
                                    </tbody>

                                </table>

                            </div>
                            {/* 分页 */}
                            <GotoPage2 />
                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </div >
        );
    }
}
const mapStateToProps = (state) => ({
    feedbackreducer: state.feedbackreducer
})
export default connect(mapStateToProps)(withRouter(Feedback));
